<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="getImg"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main" @tap="handleFocus">
				<wInput :disabled="true"  v-model="user.name" type="text" maxlength="11" 
					></wInput>
				<!-- <wInput v-model="password" type="password" maxlength="11" placeholder="密码"></wInput> -->
			</view>
			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click="login"></wButton>
			<!-- 底部信息 -->
			<u-action-sheet :closeOnClickOverlay="true" @close="userShow = false" :closeOnClickAction="true" :actions="userList" @select="selectClick" title="账号" :show="userShow"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import Cache, {
		Keys
	} from '@/utils/cache.js';
	import store from '@/store'
	import {
		webSocket
	} from '@/utils/webSocket' // 开启webSocket
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import configs from '@/config/config'
	export default {
		data() {
			return {
				userShow: false,
				userId: '', //用户id
				user: {},
				userList: [],
				isRotate: false, //是否加载旋转
				defaultImg: require('@/static/images/logo.png'),
			};
		},
		components: {
			wInput,
			wButton,
		},
		computed: {
			getImg() {
				if (this.user.id) {
					return configs.avatarUrl + '/' + this.user.id + '.jpg'
				} else {
					return this.defaultImg
				}
			},

		},
		mounted() {
			const userArr = this.$bookData
			this.userList = userArr
			this.user = userArr[parseInt(Math.random() * 3)]
		},
		methods: {
			login: function() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				var username = this.user.name
				if (!username) {
					uni.showToast({
						title: '请将信息填写全',
						icon: 'none'
					})
				} else {
					this.isRotate = true;
					Cache.setItem('x-uid', this.user.id)
					store.commit('user/SET_USER', this.user)
					webSocket()
					this.$nativeRtc.isUIKitEnable() && this.$nativeRtc.setup()
					let nativeFri = []
					this.userList.forEach(item => {
						if (this.user.id != item.id) { 
							const obj = {
								"id": item.id,
								"name": item.alias || item.name,
								"logo": configs.avatarUrl + '/' + item.id + '.jpg'
							}
							nativeFri.push(obj)
						}
						
					})
					this.$nativeRtc.isUIKitEnable() && this.$nativeRtc.updateFriendList({friends: nativeFri})
					uni.reLaunch({
					  url:"/pages/index/index"
					})
					this.isRotate = false;
				}
			},
			handleFocus() {
				this.userShow = true
			},
			selectClick(item) {
				console.log(item)
				this.user = item
			}
		}
	}
</script>

<style scoped>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>